import Vue from 'vue'

var globalVar = '111' // eslint-disable-line

new Vue({
  el: '#root',
  // template: `
  // <div :id ="aaa" @click="handleClick">
  //   {{isActive ? 'active': 'not active'}}
  //   <p>{{arr.join(' ')}}</p>
  //   <p>{{Date.now()}}</p>
  //   <p>globalVar</p>
  //   <p v-html='html'>{{html}}</p>
  // </div>
  template: `
    // <div :class="{ active: !isActive }">
    // <div :class="[isActive ? 'active' : '']">
    <div :class="[{ active : isActive }]"
          :style = '[styles, styles2]'
    >
    <p v-html='html'>{{html}}</p>
    <p>{{getJoinedArr(arr)}}</p>
  </div>
  `,
  data: {
    isActive: false,
    arr: [1, 2, 3],
    html: '<span>123</span>',
    aaa: 'main',
    styles: {
      color: 'red',
      appearance: 'none'
    },
    styles2: {
      color: 'black'
    }
  },
  // computed: {
  //   className () {

  //   }
  // },
  methods: {
    handleClick () {
      alert('clicked') // eslint-disable-line
    },
    getJoinedArr (arr) {
      return arr.join(' ')
    }
  }
})
